import React, { Component } from 'react'
import Dimensions from 'react-dimensions'
import { fetchData } from '../../../components/AjaxConsumer'
import WorkModalTable from './workModalTable'
import WorkkqmodalTable from './workkqmodalTable'

import {
    Form,
    Input,
    Tooltip,
    Icon,
    Cascader,
    Select,
    Row,
    Col,
    Checkbox,
    Button,
    message,
    Modal,
    Radio
} from 'antd';
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const Option = Select.Option;
const confirm = Modal.confirm;

class LocationForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            edit: false,
            submitUrl: '',
            whCodeList: [],
            areaCodeList: [],
            regionCodeList: [],
            instorageStrategyList: [
                { selectValue: '1', SelectName: '一步' },
                { selectValue: '2', SelectName: '两步' },
            ],
            priorityList: [
                { selectValue: '1', SelectName: '1' },
                { selectValue: '2', SelectName: '2' },
                { selectValue: '3', SelectName: '3' },
                { selectValue: '4', SelectName: '4' },
            ],
            activeFlagList: [
                { selectValue: '1', SelectName: '是' },
                { selectValue: '0', SelectName: '否' }
            ],
            formData: {
                locationId: '',
                locationCode: '',
                shelfOrder: '',
                checkOrder: '',
                pickOrder: '',
                locationUse: '',
                pickFlag: '',
                locationType: '',
                locationAttr: '',
                turnDemand: '',
                stockEnv: '',
                warehouseCode: '',
                regionCode: '',
                areaCode: '',
                checkCode: '',
                workArea: '',
                port1: '',
                port2: '',
                port3: '',
                volumeLimit: '',
                weightLimit: '',
                boxLimit: '',
                qtyLimit: '',
                palletLimit: '',
                length: '',
                width: '',
                height: '',
                xcoordinate: '',
                ycoordinate: '',
                zcoordinate: '',
                xpixels: '',
                ypixels: '',
                zpixels: '',
                locRow: '',
                layerNum: '',
                locColumn: '',
                bord: '',
                productMix: '',
                batchMix: '',
                ignoreId: '',
            }
        };
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, fieldsValue) => {
            if (!err) {
                this.setState({ loading: true });
                let values = {
                    ...fieldsValue,
                };
                console.log('表单提交数据-----------', values);
                //发送ajax 控制请求数据规则，无值的设为空
                for (let item in values) {
                    if (!values[item]) {
                        values[item] = ''
                    }
                }
                const options = {
                    url: this.state.submitUrl,
                    type: 'post',
                    condition: values
                };
                fetchData(this, options, (res) => {
                    //回调函数
                    this.setState({
                        loading: false
                    });
                    if (res.code == '1') {
                        message.success('操作成功');

                        this.handleCancel();
                        this.props.refreshHandle();
                    } else {
                        message.error(res.msg);
                    }

                })
            }
        });
    }

    handleCancel = () => {
        //this.hideModal();
        this.props.onCancel();//123
        this.props.form.resetFields(); //初始化表单
        //初始化ajax加载过来的selectList
    }

    // 修改属性后刷新-n次
    componentWillReceiveProps(nextProps) {
        if (nextProps.init) {
            if (this.state.whCodeList.length == 0) {
                this.queryWarehousesUnderFactory();
            }
        }
        if (nextProps.initform) {
            this.props.form.resetFields(); //初始化表单
            this.props.initformCancel();
        }

        console.log('componentWillReceiveProps------', nextProps);

        let tmpFormData = nextProps.formData;
        let url = nextProps.submitUrl;
        if (url == '/base/data/location/u') {
            this.setState({
                formData: tmpFormData,
                submitUrl: nextProps.submitUrl,
                edit: true
            });
        } else {
            this.setState({
                formData: tmpFormData,
                submitUrl: nextProps.submitUrl,
                edit: false
            });
        }
        /* this.setState({
             formData:tmpFormData,
             submitUrl:nextProps.submitUrl
         });*/
    }
    // 组件参数实例化-仅一次
    componentWillMount() {
        console.log('componentWillMount-----', this.props);
        this.setState({
            submitUrl: this.props.submitUrl,
            formData: this.props.formData
        });
    }
    //初始化页面刷新-仅一次
    componentDidMount() {
        this.queryWarehousesUnderFactory();
    }

    // 查询工厂下的仓库
    queryWarehousesUnderFactory = () => {
        let factoryCode = 'all';
        let options = {
            url: '/base/data/warehouse/r/' + factoryCode + '/warehouse',
            type: 'post',
            condition: {}
        };
        fetchData(this, options, (listData) => {
            let optionList = [];
            listData.data.map((e, index) => {
                let tmp = {};
                tmp.selectValue = e.warehouseCode;
                tmp.SelectName = e.warehouseName;
                optionList.push(tmp);
            });
            console.log('仓库列表------', optionList);

            if (this.props.submitUrl == '/base/data/location/u') {
                this.setState({
                    edit: true,
                    whCodeList: optionList
                });
            } else {
                this.setState({
                    edit: false,
                    whCodeList: optionList
                });
            }

            /*this.setState({
                whCodeList:optionList
            });*/
        });
    }
    // 仓库选择change后加载区域下拉框
    whCodeSelectChange = (whCode) => {
        if (whCode != '' && whCode != undefined) {
            const options = {
                url: '/base/region/r/' + whCode + '/region',
                type: 'post',
                condition: {}
            };
            fetchData(this, options, (res) => {
                let optionList = [];
                res.data.map((e, index) => {
                    let tmp = {};
                    tmp.selectValue = e.regionCode;
                    tmp.SelectName = e.regionDesc;
                    optionList.push(tmp);
                });
                this.setState({ regionCodeList: optionList })
            });
        } else {
            this.setState({ regionCodeList: [] })
        }
        this.props.form.setFieldsValue({ regionCode: '' })
    }


    workModalTableSearchClick = () => {
        this.refs.workModalTable.showModal();
    }

    workkqModalTableSearchClick = () => {
        this.refs.workkqmodalTable.showModal();
    }

    allocationRuleSearchClick = () => {
        message.warn('当前区域分配规则还未开发');
    }

    // 入库出库弹出模态框的统一回调函数
    getLocationCodeTableData = (resultData) => {
        // if(resultData.type=='instock'){
        this.props.form.setFieldsValue(
            {
                workArea: resultData.value
            }
        );
        // }

    }

    getLocationCodekqTableData = (resultData) => {
        // if(resultData.type=='instock'){
        this.props.form.setFieldsValue(
            {
                areaCode: resultData.value
            }
        );
        // }

    }


    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 }
            }
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: { span: 24, offset: 0 },
                sm: { span: 24, offset: 10 }
            }
        };
        //一行几个 （总宽度24,）
        const colNumber = 12;//一行2个
        return (
            <div>
                <Form
                    onSubmit={this.handleSubmit}
                    style={{
                        backgroundColor: '#fff',
                        paddingTop: '20px',
                        paddingBottom: '20px'
                    }}>
                    <Row>
                        <Col span={0}>
                            <FormItem>
                                {getFieldDecorator('locationId', {
                                    initialValue: this.state.formData.locationId,
                                    rules: [
                                        {}
                                    ]
                                })(<Input type="hidden" />)}
                            </FormItem>
                        </Col>
                        <Col span={colNumber}>
                            <FormItem {...formItemLayout} label="库位编码" hasFeedback>
                                {getFieldDecorator('locationCode', {
                                    initialValue: this.state.formData.locationCode,
                                    rules: [
                                        {
                                            required: true, message: '请输入库位编码!'
                                        }, {
                                            max: 40, message: '输入内容应少于40个字符！'
                                        }
                                    ]
                                })(<Input  />)}
                            </FormItem>
                        </Col>
                        <Col span={colNumber}>
                            <FormItem
                                {...formItemLayout}
                                label="仓库编码"
                            >
                                <Row gutter={8}>
                                    {getFieldDecorator('warehouseCode', {
                                        initialValue: this.state.formData.warehouseCode,
                                        rules: [{
                                            required: true, message: '请选择仓库编码!'
                                        }, {
                                            max: 40, message: '输入内容应少于40个字符！'
                                        }],
                                    })(
                                        <Select
                                            placeholder="请选择"
                                            showSearch
                                            allowClear
                                            onChange={this.whCodeSelectChange}
                                        >
                                            {
                                                this.state.whCodeList.map((es, sIndex) => {
                                                    return (
                                                        <Option key={sIndex} value={es.selectValue}>{es.SelectName}</Option>
                                                    )
                                                })
                                            }
                                        </Select>
                                        )}
                                </Row>
                            </FormItem>
                        </Col>

                        <Col span={colNumber}>
                            <FormItem
                                {...formItemLayout}
                                label="区域编码"
                            >
                                <Row gutter={8}>
                                    {getFieldDecorator('regionCode', {
                                        initialValue: this.state.formData.regionCode,
                                        rules: [{
                                            required: true, message: '请选择区域编码!'
                                        }, {
                                            max: 40, message: '输入内容应少于40个字符！'
                                        }],
                                    })(
                                        <Select
                                            placeholder="请选择"
                                            showSearch
                                            allowClear
                                        >
                                            {
                                                this.state.regionCodeList.map((es, sIndex) => {
                                                    return (
                                                        <Option key={sIndex} value={es.selectValue}>{es.SelectName}</Option>
                                                    )
                                                })
                                            }
                                        </Select>
                                        )}
                                </Row>
                            </FormItem>
                        </Col>

                        <Col span={colNumber}>
                            <FormItem {...formItemLayout} label="库区编码" hasFeedback>
                                <Row gutter={8}>
                                    <Col span={22}>
                                        {getFieldDecorator('areaCode', {
                                            initialValue: this.state.formData.areaCode,
                                            rules: [
                                                {
                                                    //required: true, message: '请选择产品编码'
                                                }
                                            ]
                                        })(
                                            <Input disabled />
                                            )}
                                    </Col>
                                    <Col span={2}>
                                        <Icon type="search" style={{ cursor: 'pointer' }} onClick={this.workkqModalTableSearchClick} />
                                    </Col>
                                </Row>
                            </FormItem>
                        </Col>

                        <Col span={colNumber}>
                            <FormItem {...formItemLayout} label="工作区" hasFeedback>
                                <Row gutter={8}>
                                    <Col span={22}>
                                        {getFieldDecorator('workArea', {
                                            initialValue: this.state.formData.workArea,
                                            rules: [
                                                {
                                                    //required: true, message: '请选择产品编码'
                                                }
                                            ]
                                        })(
                                            <Input disabled />
                                            )}
                                    </Col>
                                    <Col span={2}>
                                        <Icon type="search" style={{ cursor: 'pointer' }} onClick={this.workModalTableSearchClick} />
                                    </Col>
                                </Row>
                            </FormItem>
                        </Col>

                        {
                            /*<Col span={colNumber}>
                             <FormItem {...formItemLayout} label="上架顺序" hasFeedback>
                             {getFieldDecorator('shelfOrder', {
                             initialValue: this.state.formData.shelfOrder,
                             rules: [
                             {
                             max: 40, message: '输入内容应少于40个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>
                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="拣货顺序" hasFeedback>
                             {getFieldDecorator('pickOrder', {
                             initialValue: this.state.formData.pickOrder,
                             rules: [
                             {
                             max: 40, message: '输入内容应少于40个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>
                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="盘点顺序" hasFeedback>
                             {getFieldDecorator('checkOrder', {
                             initialValue: this.state.formData.checkOrder,
                             rules: [
                             {
                             max: 40, message: '输入内容应少于40个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>

                             <Col span={colNumber}>
                             <FormItem
                             {...formItemLayout}
                             label="库位使用"
                             >
                             <Row gutter={8}>
                             {getFieldDecorator('locationUse', {
                             initialValue: this.state.formData.locationUse,
                             rules: [{
                             required: true, message: '请选择库位使用!'
                             }]
                             })(
                             <Select placeholder="请选择" showSearch allowClear >
                             {
                             this.state.activeFlagList.map((es, sIndex) => {
                             return (
                             <Option key={sIndex} value={es.selectValue}>{es.SelectName}</Option>
                             )
                             })
                             }
                             </Select>
                             )}
                             </Row>
                             </FormItem>
                             </Col>

                             <Col span={colNumber}>
                             <FormItem
                             {...formItemLayout}
                             label="是否开启库内交接"
                             >
                             <Row gutter={8}>
                             {getFieldDecorator('isOpenKnFlag', {
                             initialValue: this.state.formData.isOpenKnFlag,
                             rules: [{
                             required: true, message: '请选择是否开启库内交接!'
                             }]
                             })(
                             <Select placeholder="请选择" showSearch allowClear >
                             {
                             this.state.activeFlagList.map((es, sIndex) => {
                             return (
                             <Option key={sIndex} value={es.selectValue}>{es.SelectName}</Option>
                             )
                             })
                             }
                             </Select>
                             )}
                             </Row>
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem
                             {...formItemLayout}
                             label="是否允许拣货"
                             >
                             <Row gutter={8}>
                             {getFieldDecorator('pickFlag', {
                             initialValue: this.state.formData.pickFlag,
                             rules: [{
                             required: true, message: '请选择是否允许拣货!'
                             }]
                             })(
                             <Select placeholder="请选择" showSearch allowClear >
                             {
                             this.state.activeFlagList.map((es, sIndex) => {
                             return (
                             <Option key={sIndex} value={es.selectValue}>{es.SelectName}</Option>
                             )
                             })
                             }
                             </Select>
                             )}
                             </Row>
                             </FormItem>
                             </Col>




                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="库位类型" hasFeedback>
                             {getFieldDecorator('locationType', {
                             initialValue: this.state.formData.locationType,
                             rules: [
                             {
                             max: 40, message: '输入内容应少于40个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="库位属性" hasFeedback>
                             {getFieldDecorator('locationAttr', {
                             initialValue: this.state.formData.locationAttr,
                             rules: [
                             {
                             max: 40, message: '输入内容应少于40个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>

                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="库存环境" hasFeedback>
                             {getFieldDecorator('stockEnv', {
                             initialValue: this.state.formData.stockEnv,
                             rules: [
                             {
                             max: 100, message: '输入内容应少于40个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>

                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="校验码" hasFeedback>
                             {getFieldDecorator('checkCode', {
                             initialValue: this.state.formData.checkCode,
                             rules: [
                             {
                             max: 40, message: '输入内容应少于40个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>

                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="允许混放产品" hasFeedback>
                             {getFieldDecorator('productMix', {
                             initialValue: this.state.formData.productMix,
                             rules: [
                             {
                             max: 2, message: '输入内容应少于2个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>

                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="允许混放批次" hasFeedback>
                             {getFieldDecorator('batchMix', {
                             initialValue: this.state.formData.batchMix,
                             rules: [
                             {
                             max: 2, message: '输入内容应少于2个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="体积限制" hasFeedback>
                             {getFieldDecorator('volumeLimit', {
                             initialValue: this.state.formData.volumeLimit,
                             rules: [
                             {
                             max: 16, message: '输入内容应少于16个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="重量限制" hasFeedback>
                             {getFieldDecorator('weightLimit', {
                             initialValue: this.state.formData.weightLimit,
                             rules: [
                             {
                             max: 16, message: '输入内容应少于16个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="箱数限制" hasFeedback>
                             {getFieldDecorator('boxLimit', {
                             initialValue: this.state.formData.boxLimit,
                             rules: [
                             {
                             max: 16, message: '输入内容应少于16个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="数量限制" hasFeedback>
                             {getFieldDecorator('qtyLimit', {
                             initialValue: this.state.formData.qtyLimit,
                             rules: [
                             {
                             max: 16, message: '输入内容应少于16个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="托盘限制" hasFeedback>
                             {getFieldDecorator('palletLimit', {
                             initialValue: this.state.formData.palletLimit,
                             rules: [
                             {
                             max: 16, message: '输入内容应少于16个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="长度" hasFeedback>
                             {getFieldDecorator('length', {
                             initialValue: this.state.formData.length,
                             rules: [
                             {
                             max: 16, message: '输入内容应少于16个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="宽度" hasFeedback>
                             {getFieldDecorator('width', {
                             initialValue: this.state.formData.width,
                             rules: [
                             {
                             max: 16, message: '输入内容应少于16个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="高度" hasFeedback>
                             {getFieldDecorator('height', {
                             initialValue: this.state.formData.height,
                             rules: [
                             {
                             max: 16, message: '输入内容应少于16个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="X坐标" hasFeedback>
                             {getFieldDecorator('xcoordinate', {
                             initialValue: this.state.formData.xcoordinate,
                             rules: [
                             {
                             max: 16, message: '输入内容应少于16个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="Y坐标" hasFeedback>
                             {getFieldDecorator('ycoordinate', {
                             initialValue: this.state.formData.ycoordinate,
                             rules: [
                             {
                             max: 16, message: '输入内容应少于16个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="Z坐标" hasFeedback>
                             {getFieldDecorator('zcoordinate', {
                             initialValue: this.state.formData.zcoordinate,
                             rules: [
                             {
                             max: 16, message: '输入内容应少于16个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="X像素" hasFeedback>
                             {getFieldDecorator('xpixels', {
                             initialValue: this.state.formData.xpixels,
                             rules: [
                             {
                             max: 16, message: '输入内容应少于16个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="Y像素" hasFeedback>
                             {getFieldDecorator('ypixels', {
                             initialValue: this.state.formData.ypixels,
                             rules: [
                             {
                             max: 16, message: '输入内容应少于16个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="Z像素" hasFeedback>
                             {getFieldDecorator('zpixels', {
                             initialValue: this.state.formData.zpixels,
                             rules: [
                             {
                             max: 16, message: '输入内容应少于16个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="排" hasFeedback>
                             {getFieldDecorator('locRow', {
                             initialValue: this.state.formData.locRow,
                             rules: [
                             {
                             max: 40, message: '输入内容应少于40个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="层数" hasFeedback>
                             {getFieldDecorator('layerNum', {
                             initialValue: this.state.formData.layerNum,
                             rules: [
                             {
                             max: 16, message: '输入内容应少于16个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>

                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="列" hasFeedback>
                             {getFieldDecorator('locColumn', {
                             initialValue: this.state.formData.locColumn,
                             rules: [
                             {
                             max: 40, message: '输入内容应少于40个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>


                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="排" hasFeedback>
                             {getFieldDecorator('locRow', {
                             initialValue: this.state.formData.locRow,
                             rules: [
                             {
                             max: 40, message: '输入内容应少于40个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>

                             <Col span={colNumber}>
                             <FormItem {...formItemLayout} label="巷道" hasFeedback>
                             {getFieldDecorator('bord', {
                             initialValue: this.state.formData.bord,
                             rules: [
                             {
                             max: 40, message: '输入内容应少于40个字符！'
                             }
                             ]
                             })(<Input />)}
                             </FormItem>
                             </Col>*/
                        }


                        <Col span={24}>
                            <FormItem {...tailFormItemLayout}>
                                <Button type="primary" htmlType="submit" size="large">{this.state.loading ? '提交中...' : '确定'}</Button>
                                <Button
                                    type="default"
                                    style={{ marginLeft: '50px' }}
                                    size="large"
                                    onClick={this.handleCancel}
                                >
                                    取消
                                </Button>
                            </FormItem>
                        </Col>

                    </Row>
                </Form>


                <WorkModalTable getTableData={this.getLocationCodeTableData} ref='workModalTable' />

                <WorkkqmodalTable getkqTableData={this.getLocationCodekqTableData} ref='workkqmodalTable' />

            </div>
        );
    }
}

export default Form.create()(LocationForm);
